<template>
  <div>

    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <span >{{userform.id}}</span>
        <el-dropdown @command="handleCommand">
          <i class="el-icon-setting" style="margin-right:15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="a">修改密码</el-dropdown-item>
            <el-dropdown-item command="b">回到首页</el-dropdown-item>
            <el-dropdown-item command="c">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>

      <el-container>
        <el-aside width="200px">
          <el-menu :default-openeds="['1']">
            <el-submenu index="1">
              <template slot="title"><i class="el-icon-caret-right"></i>学生信息管理</template>
              <el-menu-item-group>
                <el-menu-item index="1-1">
                  <!--路由嵌套及传值-->
                  <!--v-bind:to实现数据双向绑定，name传组件名，params传递参数-->
                  <router-link v-bind:to="{name:'UserProfile' ,params:{id:userform.id}}">基本信息</router-link>
                </el-menu-item>
                <el-menu-item index="1-2">
                  <!--跳转也可以使用路径-->
                  <router-link v-bind:to="{name:'UserReward',params:{id:userform.id}}">奖助信息</router-link>
                </el-menu-item>
                <el-menu-item index="1-3">
                  <!--跳转也可以使用路径-->
                  <router-link v-bind:to="{name:'UserDaily',params:{id:userform.id}}">日常信息</router-link>
                </el-menu-item>
                <el-menu-item index="1-4">
                  <!--跳转也可以使用路径-->
                  <router-link v-bind:to="{name:'UserGpa',params:{id:userform.id}}">成绩查询</router-link>
                </el-menu-item>
                <el-menu-item index="1-5">
                  <!--跳转也可以使用路径-->
                  <router-link v-bind:to="{name:'Party',params:{id:userform.id}}">个人入党事件</router-link>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title"><i class="el-icon-caret-right"></i>科创管理</template>
              <e1-menu-item-group>
                <el-menu-item index="2-1">
                  <!--跳转也可以使用路径-->
                  <router-link v-bind:to="{name:'ScienceQuery',params:{id:userform.id}}">科创立项查询</router-link>
                </el-menu-item>
              </e1-menu-item-group>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title"><i class="el-icon-caret-right"></i>日程管理</template>
              <e1-menu-item-group>
                <el-menu-item index="3-1">
                  <!--跳转也可以使用路径-->
                  <router-link v-bind:to="{name:'ScheduleQuery',params:{id:userform.id}}">日程查询</router-link>
                </el-menu-item>
              </e1-menu-item-group>
            </el-submenu>
            <el-submenu index="4">
              <template slot="title"><i class="el-icon-caret-right"></i>就业管理</template>
              <e1-menu-item-group>
                <el-menu-item index="3-1">
                  <!--跳转也可以使用路径-->
                  <router-link v-bind:to="{name:'Work',params:{id:userform.id}}">个人就业信息</router-link>
                </el-menu-item>
              </e1-menu-item-group>
            </el-submenu>
            <el-submenu index="5">
              <template slot="title"><i class="el-icon-caret-right"></i>图书管理</template>
              <e1-menu-item-group>
                <el-menu-item index="3-1">用户设置</el-menu-item>
              </e1-menu-item-group>
            </el-submenu>
            <el-submenu index="6">
              <template slot="title"><i class="el-icon-caret-right"></i>社会实践管理</template>
              <e1-menu-item-group>
                <el-menu-item index="3-1">
                  <!--跳转也可以使用路径-->
                  <router-link v-bind:to="{name:'PracticeAdd',params:{id:userform.id}}">实践立项</router-link>
                </el-menu-item>
                <el-menu-item index="3-1">
                  <!--跳转也可以使用路径-->
                  <router-link v-bind:to="{name:'Practice',params:{id:userform.id}}">实践信息</router-link>
                </el-menu-item>
              </e1-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view/>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="日历" name="first">
              <el-calendar v-model="value">
              </el-calendar>
            </el-tab-pane>
            <el-tab-pane label="风采展示" name="second">
              <div class="block">
                <el-carousel height="600px" type="card">
                  <el-carousel-item v-for="item in 4" :key="item">
                        <img fit="fill" v-if="item=='1'" src="../assets/1.png"/>
                        <img fit="fill" v-if="item=='2'" src="../assets/2.png"/>
                        <img fit="fill" v-if="item=='3'" src="../assets/3.png"/>
                        <img  v-if="item=='4'" src="../assets/4.png"/>
                  </el-carousel-item>
                </el-carousel>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
export default {
  name: "Main",
  props: ['username'],
  data() {
    return {
      bannerH:200,
      activeName: 'second',
      value: new Date(),
      userform: {
        id:'',
        name:''
        }
    };
  },
  mounted: function() {
    // 这里是将list2参数的值赋给list1
    this.userform.id = JSON.parse(JSON.stringify(this.username));
    console.log(this.username);
    console.log(this.userform.id);
  },
  methods: {
    handleCommand(command){
      if(command ==='a'){
        this.$router.push("/changePwd/"+this.userform.id);
      }
      else if(command ==='b'){
        this.$router.push("/main/"+this.userform.id);
      }
      else if(command ==='c'){
        this.$router.push("/Login");
      }
    },
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
}
</script>
<style scoped lang="scss">
.el-header {
  background-color: #90d7ec;
  color: #333;
  line-height: 60px;
}
.el-aside {
  color: #333;
}


.el-carousel__item:nth-child(2n) {
}

.el-carousel__item:nth-child(2n+1) {
}
</style>
